<script setup lang="ts">
import ByIcon from '@/components/ui/ByIcon.vue';

defineProps<{
    type?: "success" | "fail" | "waiting";

    title?: string;
}>();


const iconNameMap = {
    success: "Right",
    fail: "Close"
};
</script>

<template>

    <view class="flex-1 step-item-wrap text-center">
        <view class="relative step-item flex-center mx-auto w-[86px] h-[86px] rounded-full"
              :class="[type ? type == 'waiting' ? 'bg-[#73443B]' : 'bg-dark' : 'bg-light']">

            <ByIcon v-if="type"
                    :size="36"
                    :name="iconNameMap[type]"
                    class="text-white" />
        </view>

        <view class="mt-0.5 text-white text-lg">{{ title }}</view>
    </view>
</template>

<style lang="less">
.step-item-wrap {
    &:first-child {
        &>.step-item {
            &::before {
                display: none;
            }
        }
    }
}

.step-item {
    &::before {
        content: " ";
        position: absolute;
        top: 50%;
        right: 0;
        height: 10px;
        width: 300px;
        background: linear-gradient(90deg, #bb8554, #FFF8EF);
        transform: translateY(-50%);
        z-index: -1;
    }
}
</style>
